<template>
  <el-dialog
    :visible.sync="showPointDialog"
    :before-close="check"
    title="查看"
    width="60%"
  >
    <el-card class="box-card">
      <div slot="header">
        <span class="bold">服务信息</span>
      </div>
      <el-row>
        <el-col :span="12">
          <div class="watch required">
            服务ID：{{ serviceId }}
          </div>
        </el-col>
        <el-col :span="12">
          <div class="watch required">
            创建日期：{{ createTime }}
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div class="watch required">
            服务名称：{{ name }}
          </div>
        </el-col>
        <el-col :span="12">
          <div class="watch required">服务类型：
            {{ type }}
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="watch required">服务描述：
            {{ description }}
          </div>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>

<script>
import { getDetail } from '@/api/services.js'
export default {
  name: 'Watch',
  props: {
    watchDialog: {
      type: Boolean,
      default: false
    },
    watchId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showPointDialog: false, // 遮罩
      serviceId: '', // id
      createTime: '', // 创建日期
      name: '', // 名称
      serviceType: '', // 服务类型
      type: '', // 服务类型
      description: '' // 描述

    }
  },
  watch: {
    watchDialog(newVal) {
      this.showPointDialog = newVal
    },
    watchId(newVal) {
      this.loadInfo(newVal)
    }
  },
  methods: {
    // 回调父组件
    check() {
      this.showPointDialog = false
      this.$emit('closeWatch')
    },
    loadInfo(id) {
      getDetail({ id: id }).then(res => {
        this.serviceId = res.data.serviceId
        this.createTime = res.data.createTime
        this.name = res.data.name
        this.type = res.data.type
        this.description = res.data.description
      })
    }
  }
}
</script>

<style scoped>
.box-card{
  margin-top: -25px;
}
.box-card1{
  margin-top: 10px;
}
.box-card2{
  margin-top: 10px;
}
.watch{
  margin: 10px 0;
}
.bold{
  font-weight: bold;
}
.el-card__header{
  padding: 9px 20px !important;
}
.required::before{
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
.el-button.is-circle{
  padding: 5px !important;
}
.btnall{
  margin: 17px auto -12px auto;
  width: 230px;
}
</style>
